<template>
    <div class="role">
        <lay-tab type="card" v-model="tab.current">
            <lay-tab-item title="角色管理" id="1">
                <div class="user_card d">
                    <div class="user_card_table">
                        <lay-table :columns="table.columns" :data-source="table.dataSource" even
                            :loading="table.Loading" style="min-height: 450px;height: 550px;"
                            v-model:expandKeys="table.expandKeys" @row="clickExpand($event)">
                            <template v-slot:action="{ row }">
                                <lay-button type="primary" size="xs" @click="editRolePath(row)">分配权限</lay-button>
                            </template>
                            <template v-slot:userImage="{ row }">
                                <lay-avatar :src="row.userImage" size="lg" shape="circle"></lay-avatar>
                            </template>
                            <template v-slot:permissionName="{ row }">
                                <div class="aaa" v-for="item in table.dataSource">
                                    <lay-tag :type="item.roleType" v-if="row.id == item.id">{{ item.permissionName
                                        }}</lay-tag>
                                </div>
                            </template>
                            <template v-slot:expand="{ data }">
                                <div class="expand-content">
                                    <div class="expand_content_table">
                                        <table>
                                            <!-- 两列一行 -->
                                            <tr v-for="(item, index) in data.roleList" :key="index">
                                                <td>{{ item.pathID }}</td>
                                                <td>{{ item.description }}</td>
                                                <td>{{ item.pathName }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </template>
                        </lay-table>
                    </div>
                </div>
            </lay-tab-item>
            <lay-tab-item title="路由管理" id="2">
                <div class="user_card d">
                    <div class="user_card_add " style="margin-bottom: 20px;">
                        <lay-button type="primary" size="sm" @click="openPathLayer('添加路由')">添加路径</lay-button>
                    </div>
                    <div class="user_card_table">
                        <lay-table :columns="table2.columns" :data-source="table2.dataSource" even
                            style="min-height: 450px;height: 450px;" :loading="table2.Loading">
                            <template v-slot:action="{ row }">
                                <lay-button type="primary" size="xs" @click="openPathLayer('编辑路由', row)">
                                    编辑</lay-button>
                                <lay-button type="danger" size="xs" @click="deletePathRow(row)">删除</lay-button>
                            </template>
                            <template v-slot:userImage="{ row }">
                                <lay-avatar :src="row.userImage" size="lg" shape="circle"></lay-avatar>
                            </template>
                            <template v-slot:permissionName="{ row }">
                                {{ row.permissionName }}
                                <div class="aaa" v-for="item in table.dataSource">
                                    <lay-tag :type="item.roleType" v-if="row.id == item.id">{{ item.permissionName
                                        }}</lay-tag>
                                </div>
                            </template>
                        </lay-table>
                    </div>
                </div>
            </lay-tab-item>
        </lay-tab>
    </div>

    <lay-layer v-model="pathVisible" :shade="false" :title="table2.pathVisibleTitle">
        <div class="a">
            <lay-form size="sm" :model="table2.form">
                <lay-form-item label="路由名称" tips="路由是跳转网页路径，是唯一。">
                    <lay-input size="sm" v-model="table2.form.pathName"></lay-input>
                </lay-form-item>
                <lay-form-item label="路由描述" tips="对该路由信息的描述">
                    <lay-input size="sm" v-model="table2.form.description"></lay-input>
                </lay-form-item>
                <lay-form-item style="text-align: right;">
                    <lay-button type="primary" @click="submitPath">提交</lay-button>
                    <lay-button type="default" @click="pathVisible = false">取消</lay-button>
                </lay-form-item>
            </lay-form>
        </div>
    </lay-layer>
    <lay-layer v-model="roleVisible" :shade="false" title="分配权限">
        <div class="a">
            <lay-form size="sm" :model="table.form">
                <lay-form-item label="角色">
                    <lay-select v-model="table.form.roleID" placeholder="请选择">
                        <lay-select-option :value="item.id" :label="item.permissionName"
                            v-for="item in table.dataSource" :key="item.id"></lay-select-option>
                    </lay-select>
                </lay-form-item>
                <lay-form-item label="权限列表">
                    <lay-checkbox-group v-model="checkeds" @change="groupChange">
                        <lay-checkbox name="like" skin="primary" :value="Number(item.pathID)"
                            v-for="item in table2.dataSource" :key="item.pathID">{{ item.description }}</lay-checkbox>
                    </lay-checkbox-group>
                </lay-form-item>
                <lay-form-item style="text-align: right;">
                    <lay-button type="primary" @click="submitRole">提交</lay-button>
                    <lay-button type="default" @click="roleVisible = false">取消</lay-button>
                </lay-form-item>
            </lay-form>
        </div>
    </lay-layer>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import {
    getRole,
    getUserRole,
    getPaths,
    addPath,
    deletePath,
    editUserRole,
    editPath
} from '../../api/path/role.js'
import { layer } from "@layui/layui-vue";
const roleVisible = ref(false)
const pathVisible = ref(false)
const checkeds = ref([])
const tab = ref({
    current: '1'
})
const table = ref({
    columns: [
        {
            title: '权限编号',
            key: 'RoleID',
            width: '100px',
        },
        {
            title: '用户角色',
            key: 'permissionName',
            customSlot: 'permissionName',
            width: '200px',
        },
        {
            title: '角色说明',
            key: 'description',
            width: '200px',
            slot: 'role'
        },
        {
            title: '操作',
            key: 'action',
            customSlot: 'action',
            width: '120px',
        }
    ],
    dataSource: [],
    Loading: false,
    expandKeys: [],
    form: {
        roleID: '',
    }
})
const table2 = ref({
    columns: [
        {
            title: '权限编号',
            key: 'pathID',
            width: '80px',
        },
        {
            title: '路径名称',
            key: 'pathName',
            width: '100px',
            slot: 'role'
        },
        {
            title: '路由说明',
            key: 'description',
            width: '100px',
            slot: 'role'
        },
        {
            title: '操作',
            key: 'action',
            width: '100px',
            customSlot: 'action'
        }
    ],
    dataSource: [],
    Loading: false,
    form: {
        pathName: '',
        description: '',
        pathID: '',
    },
    pathVisibleTitle: ''
})

onMounted(() => {
    getRoleList()
    getPathsList()
})
const getPathsList = () => {
    getPaths().then(res => {
        table2.value.dataSource = res.data
    })
}
const getRoleList = () => {
    getRole().then(res => {
        table.value.dataSource = res.data
    })
}

const clickExpand = (val) => {
    let index = table.value.dataSource.findIndex((e) => {
        return e.id == val.id
    })
    getUserRole({ id: val.id }).then(res => {
        table.value.dataSource[index].roleList = res.data
    })
}
const oldCheckeds = ref([])
const submitRole = () => {
    editUserRole({
        roleID: table.value.form.roleID,
        newIds: checkeds.value,
    }).then(res => {
        if (res.code == 1) {
            layer.msg(res.data, { icon: 1, time: 1000 })
        } else {
            layer.msg(res.data, { icon: 2, time: 1000 })
        }
        setTimeout(() => {
            location.reload()
            getRoleList()
            roleVisible.value = false
        }, 1000)
    })
}
const editRolePath = (item) => {
    table.value.form.roleID = item.id
    let index = table.value.dataSource.findIndex((e) => {
        return e.id == item.id
    })
    getUserRole({ id: item.id }).then(res => {
        table.value.dataSource[index].roleList = res.data
        let ids = []
        table.value.dataSource[index].roleList.forEach(e => {
            ids.push(e.pathID)
        })
        oldCheckeds.value = ids
        checkeds.value = ids
    })
    roleVisible.value = true
}


// 操作路径
const deletePathRow = (row) => {
    layer.confirm("确定要删除该路径吗？",
        {
            btn: [
                {
                    text: '确定', callback: (id) => {
                        deletePath({ id: row.pathID }).then(res => {
                            console.log(res);
                            if (res.code == 1) {
                                layer.msg(res.msg, { icon: 1 })
                                getPathsList()
                            } else {
                                layer.msg(res.msg, { icon: 2 })
                            }
                        })
                        layer.close(id);
                    }
                },
                {
                    text: '取消', callback: (id) => {
                        layer.close(id);
                    }
                }
            ]
        }
    );
}
const openPathLayer = (title, row) => {
    pathVisible.value = true
    table2.value.pathVisibleTitle = title
    if (title == '添加路由') {
        table2.value.form.pathName = ''
        table2.value.form.description = ''
        table2.value.form.pathID = ''
    } else {
        table2.value.form.pathName = row.pathName
        table2.value.form.description = row.description
        table2.value.form.pathID = row.pathID
    }
}
const submitPath = () => {
    if (table2.value.pathVisibleTitle == '添加路由') {
        addPathRow()
    } else {
        editPathRow()
    }
}
const addPathRow = () => {
    addPath({ pathName: table2.value.form.pathName, description: table2.value.form.description }).then(res => {
        console.log(res);
        if (res.code == 1) {
            layer.msg(res.msg, { icon: 1 })
            getPathsList()
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
    pathVisible.value = false

}
const editPathRow = () => {
    editPath({
        pathID: table2.value.form.pathID,
        pathName: table2.value.form.pathName,
        description: table2.value.form.description
    }).then(res => {
        if (res.code == 1) {
            layer.msg(res.data, { icon: 1 })
        } else {
            layer.msg(res.data, { icon: 2 })
        }
    })
    setTimeout(() => {
        pathVisible.value = false
        getPathsList()
    }, 800)
}
</script>
<style scoped>
.role {
    padding: 10px;
}

.content_table {
    background-color: #fff;
}

.expand_content_table {
    padding-left: 50px;
}

.expand_content_table table {
    width: 100%;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
}
</style>